<template>
    <div>
        <!-- 面包屑导航 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/Welcome' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>用户管理</el-breadcrumb-item>
            <el-breadcrumb-item>用户列表</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 卡片区域 -->
        <el-card class="box-card">
            <!-- 搜索框区域 -->
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-input placeholder="请输入内容" v-model="queryInfo.query" clearable @clear="getUserList">                  
                        <el-button  slot="append" icon="el-icon-search" @click="getUserList" ></el-button>
                    </el-input>
                 </el-col>
                <el-col :span="4" >
                    <el-button type="primary" @click="addUserVisible= true">添加用户</el-button>
                </el-col>
            </el-row>
            
            <!-- 表格区域 -->
           
            <el-table
            border
            stripe
            :data="userList">
            <!-- 列表编号 -->
                <el-table-column type="index" label="#"></el-table-column>
                <el-table-column prop="username" label="姓名" ></el-table-column>
                <el-table-column prop="email" label="邮箱" ></el-table-column>
                <el-table-column prop="mobile" label="电话" ></el-table-column>
                <el-table-column prop="role_name" label="角色" ></el-table-column>
                <el-table-column prop="mg_state" label="状态" >
                    <!-- 插槽 -->
                    <template slot-scope="scope">
                        <!-- {{scope.row}} -->
                        <el-switch
                            v-model="scope.row.mg_state"
                            @change="userStateChanged(scope.row)"
                        >
                        </el-switch>
                    </template>
                    
                </el-table-column>
                <el-table-column label="操作" width='180'>
                    <template slot-scope="scope">
                        <!-- 编辑信息 -->
                        <el-button type="primary" size="mini" icon="el-icon-edit" @click="showEditUser(scope.row.id)"></el-button>
                        <!-- 删除用户 -->
                        <el-button type="danger" size="mini" icon="el-icon-delete" @click="deleteUser(scope.row.id)"></el-button>
                        <!-- 分配角色按钮 -->
                        <el-tooltip class="item" effect="dark" content="分配角色按钮" placement="top">
                            <el-button type="warning" size="mini" icon="el-icon-setting" @click="allotRole(scope.row)"></el-button>
                        </el-tooltip>
                        
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页功能区域 -->
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="queryInfo.pagenum"
                :page-sizes="[1,2,5,10]"
                :page-size="queryInfo.pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
           

        </el-card>
        <!-- 添加用户对话框区域 -->
        <el-dialog
            title="添加用户"
            :visible.sync="addUserVisible"
            width="50%"
            
            @close="addUserClosed"
            >
            <!-- 对话框添加用户区域 -->
            <el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="70px">
                <el-form-item label="用户" prop="username">
                    <el-input v-model="addForm.username"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="addForm.password"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                    <el-input v-model="addForm.email"></el-input>
                </el-form-item>
                <el-form-item label="电话" prop="mobile">
                    <el-input v-model="addForm.mobile"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="addUserVisible = false">取 消</el-button>
                <el-button type="primary" @click="addUser">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 修改用户信息弹出框 -->
        <el-dialog
        title="编辑用户"
        :visible.sync="editUserVisible"
        width="50%"
        @close="editUserClosed"
        >
            <template>
                <el-form :model="editForm" :rules="editFormRules" ref="editFormRef" label-width="70px" >
                    <el-form-item label="用户" prop="username">
                        <el-input v-model="editForm.username" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="邮箱" prop="email">
                        <el-input v-model="editForm.email"></el-input>
                    </el-form-item>
                    <el-form-item label="电话" prop="mobile">
                        <el-input v-model="editForm.mobile"></el-input>
                    </el-form-item>
                </el-form>
            </template>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editUserVisible = false">取 消</el-button>
                <el-button type="primary" @click="editUser">确 定</el-button>
            </span>
        </el-dialog>
        
        <!-- 点击权限分配按钮，弹出弹窗 -->
        <el-dialog
        title="分配角色"
        :visible.sync="editRoleVisible"
        width="50%"
        >
            <!-- 表单区域 -->
            
                <p>当前用户姓名：<el-input v-model="allotUser.username" disabled></el-input></p>
                <p>当前用户角色：<el-input v-model="allotUser.role_name" disabled></el-input></p>
                <!-- 请分配角色信息 -->
                <p>请分配新角色：<el-select v-model="selectedRoleId" placeholder="请为当前用户分配角色">
                    
                    <el-option
                        v-for="item in rolesList"
                        :key="item.id"
                        :label="item.roleName"
                        :value="item.id">
                        
                        </el-option>
                    </el-select>
                </p>
            
            <span slot="footer" class="dialog-footer">
                <el-button @click="editRoleVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveAllotRole">确 定</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script>
    export default {
        // 本页数据
        data(){
            // 验证邮箱
            var checkEmail = (relu,value,cb)=>{
                // 验证邮箱的正则表达式
                const regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/
                // 进行验证
                if(regEmail.test(value)){
                    // 合法的邮箱
                    return cb()
                }

                // 邮箱不合法
                cb(new Error("请输入合法的邮箱"))
            }
            // 验证电话
            var checkMobile = (relu,value,cb)=>{
                // 验证邮箱的正则表达式
                const regMobile = /^(0|86|17951)?(13[0-9]|15[0-9]|17[0-9]|18[0-9])[0-9]{8}$/
                // 进行验证
                if(regMobile.test(value)){
                    // 合法的邮箱
                    return cb()
                }

                // 邮箱不合法
                cb(new Error("请输入合法的电话"))
            }

            return{
                // 获取用户列表参数对象
                queryInfo:{
                    query:"",
                    pagenum:1,
                    pagesize:2,
                    
                },
                
                // 用户列表信息数组
                userList:[],
                total:0,//总数据
                // 点击添加用户按钮时，是否弹出对话框
                addUserVisible:false,
                
                // 点击添加用户按钮时，要添加的用户信息
                addForm:{
                    username:"",
                    password:"",
                    email:"",
                    mobile:""
                },
                
                // 要进行添加用户信息验证规则
                addFormRules:{
                    username:[
                        { required: true, message: '请输入登录用户', trigger: 'blur' },
                        { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
                    ],
                    password:[
                        { required: true, message: '请输入登录密码', trigger: 'blur' },
                        { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
                    ],
                    email:[
                        { required: true, message: '请输入用户邮箱', trigger: 'blur' },
                        { validator:checkEmail, trigger:"blur"}
                    ],
                    mobile:[
                        { required: true, message: '请输入用户电话', trigger: 'blur' },
                        { validator:checkMobile, trigger:"blur"}
                    ]
                },
                // 点击编辑用户按钮时，是否弹出对话框
                editUserVisible:false,
                // 点击编辑用户按钮时，要进行编辑的用户信息
                editForm:{},
                // 要进行编辑用户信息验证规则
                editFormRules:{
                    email:[
                        { required: true, message: '请输入用户邮箱', trigger: 'blur' },
                        { validator:checkEmail, trigger:"blur"}
                    ],
                    mobile:[
                        { required: true, message: '请输入用户电话', trigger: 'blur' },
                        { validator:checkMobile, trigger:"blur"}
                    ]
                },
                // 当点击角色分配按钮，是否显示弹窗
                editRoleVisible:false,
                // 当点击角色分配按钮，获取的角色数据
                rolesList:[],
                // 当点击角色分配按钮，获取的用户信息
                allotUser:{

                },
                //当前选中的角色id
                selectedRoleId:""

            
            }
        },
        // 事件方法
        methods:{
            // 获取用户列表数据
            async getUserList(){
                const {data:res} = await this.$http.get("users",{
                    params:this.queryInfo
                    
                });
                if(res.meta.status !== 200){
                    return this.$message.error("获取用户列表数据失败")
                }
                // 将数据赋值到data数据中
                this.total = res.data.total;
                // this.pagenum = res.data.pagenum;
                this.userList = res.data.users
                console.log(res);
                
            },
            // 处理页码大小触发事件
            handleSizeChange(newSize){
                // console.log(newSize);
                this.queryInfo.pagesize = newSize;
                // 重新发起请求获取用户信息数据
                this.getUserList();
                
            },
            // 处理页面切换时触发事件
            handleCurrentChange(newPage){
                // console.log(newPage);
                this.queryInfo.pagenum = newPage;
                // 重新发起请求获取用户信息数据
                this.getUserList();
            },
            // 用户信息状态
            async userStateChanged(userinfo){
                // 将用户状态进行重新赋值
        
                const { data:res } = await this.$http.put(`users/${userinfo.id}/state/${userinfo.mg_state}`);
                if(res.meta.status !== 200){
                    userinfo.mg_state = !userinfo.mg_state
                    return this.$message.error("用户状态调整失败");
                }
                this.$message.success("更新用户状态成功");
            },
            // 添加用户对话框关闭事件
            addUserClosed(){
                // 将表单中数据进行清空
                this.$refs.addFormRef.resetFields()
                
            },
            //点击确定按钮，对表单数据进行预验证
            addUser(){
                // 进行预验证  
                this.$refs.addFormRef.validate(async valid => {// 进行预验证
               
                    
                    //如果验证不合法进行退出
                    if(!valid) return
                    // 如果验证通过，就提交数据
                    const {data:res} = await this.$http.post("users",this.addForm)
                    // 判断服务器返回的状态
                    if(res.meta.status !== 201){
                         this.$message.error("用户添加失败")
                    }
                    // 用户添加成功
                    this.$message.success("用户添加成功!")
                    // 隐藏添加用户对话框
                    this.addUserVisible = false
                    // 重新获取用户列表数据
                    this.getUserList()
                })
            },
            // 点击编辑按钮，是否显示对话框
            async showEditUser(id){

                // 根据id值进行用户信息的获取
                const {data:res} = await this.$http.get("users/"+id)
           
                // 判断服务器返回来的状态
                if(res.meta.status !== 200){
                    return this.$message.error("用户信息请求失败")
                }
                // 状态为200 将返回来的用户信息进行显示到页面
           
                this.editForm = res.data
                // 设置对话框为显示状态
                this.editUserVisible = true
            },
            // 点击取消按钮，将用户信息进行清空
            editUserClosed(){
                this.$refs.editFormRef.resetFields()
            },
            // 点击对话框确认按钮时,对表单数据进行预验证
            editUser(){
                this.$refs.editFormRef.validate(
                    async valid=>{
                        // 如果没有验证数据则进行退出
                        if(!valid) return
                        // 如果有验证数据则进行数据验证
                        const {data:res} = await this.$http.put("users/"+ this.editForm.id,{
                            email:this.editForm.email,
                            mobile:this.editForm.mobile
                        })
       
                        
                        // 当用户服务器返回来的状态
                        if(res.meta.status !== 200){
                            this.$message.error('用户修改失败')
                        }
                        this.editUserVisible  = false
                        
                        // 对用户列表数据进行重新获取
                        this.getUserList()
                        // 
                        this.$message.success("用户修改成功")
                        
                    }
                )
            },
            // 点击删除按钮，弹出提示框 是否确定删除
            async deleteUser(id){
                // 用户在弹出框按钮的信息
                const confirmResult = await this.$confirm(
                    '是否要删除此用户信息', 
                    '删除用户', {
                        confirmButtonText: '确定删除',
                        cancelButtonText: '取消',
                        type: 'warning'
                }).catch(
                    error=>{
                        return error                      
                    }
                );
                // 弹出删除提示框后，点击取消退出删除
                if(confirmResult !== "confirm"){
                    return this.$message.error("已取消删除用户")
                }
                // 弹出删除提示后，点击确定删除按钮
                const {data:res} = await this.$http.delete("users/" + id)
                // 服务器返回的状态值
                if(res.meta.status !== 200){
                    return this.$message.error("删除用户失败")
                }
                this.$message.success("删除成功")
                // 重新获取用户列表数据
                this.getUserList()
      
            },
            // 当点击分配权限按钮时,弹出对话窗
            async allotRole(userinfo){
                // 将获取的用户信息进行保存
                this.allotUser = userinfo
                // 先获取角色列表
                const {data:res} = await this.$http.get("roles")
                if(res.meta.status !== 200){
                    return this.$message.error("获取角色列表数据失败")
                }
                // 将角色按钮赋值到列表中
                this.rolesList= res.data
                console.log(this.rolesList);
                
            
                // 将对话窗设置为显示
                this.editRoleVisible = true
            },
            // 点击确定按钮，将分配的角色信息上传到服务器
            async saveAllotRole(){
                // 先判断用户是否选择角色
                if(!this.selectedRoleId){
                    return this.$http.error("请为用户分配角色")
                }
                // 向服务器发送请求
                const {data:res} = await this.$http.put(`users/${this.allotUser.id}/role`,{
                    rid:this.selectedRoleId
                })

                // 判断服务器返回的状态码
                if(res.meta.status !== 200){
                    return this.$message.error("分配角色失败")
                }

                this.$message.success("分配角色成功")
                this.getUserList()
                this.editRoleVisible = false
            }
            
        },
        // 生命周期函数
        created(){
            // 调用获取列表数据的方法
            this.getUserList()
            
        }
    }
</script>

<style lang="less" scoped>
   
</style>